<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="../build/pdf.js"></script>
	<script src="../build/pdf.worker.js"></script>
	<script src="jquery-2.2.1.min.js"></script>
	<style type="text/css">
			.center-text {
				text-align: center;
			}
			
			.inputfile {
				opacity: 0;
			}

			.lab {
				border-radius: 10px;
				background-color: #cc99ff;
				font-family: 楷体;
				font-size: 24px;
			}
			.estimate{
				border-radius: 10px;
				background-color: #1a8cff;
				font-family: 楷体;
				font-size: 20px;
			}
			.preview{
				border-radius: 10px;
				background-color: #ffffcc;
				font-family: 楷体;
				font-size: 14px;
			}
	</style>
  </head>
  <body>
  <h3 class="center-text">PDF转换工具</h3><br />
	<div class="center-text">
		<input type="file" name="file1" id="file1" class="inputfile" accept="application/pdf" /><br />
		<label for="file1" class='lab'>1.打开PDF文件</label><br /><br />
		<div class="center-text" id="img_info"></div>
	</div>
	<br />
    <div>
      <div id="pdf-container"></div>
    </div>
    <script>
		function createURL(file) {
			var url = null;
			if (window.createObjectURL != undefined) {
				url = window.createObjectURL(file);
			} else if (window.URL != undefined) { // mozilla(firefox)  
				url = window.URL.createObjectURL(file);
			} else if (window.webkitURL != undefined) { // webkit or chrome  
				url = window.webkitURL.createObjectURL(file);
			}
			return url;
		};
		function add0(m){return m<10?('0'+m):m }
		function getFileName(){
				var file = $("#file1").val();
 				var pos = file.lastIndexOf("\\");
 				var filename = file.substring(pos+1);
				return filename.lastIndexOf(".")>0? filename.substring(0,filename.lastIndexOf(".")):filename;
 				//var fileextname = filename.substring(filename.lastIndexOf("."), filename.length);
		};
		function getSaveFileName(baseFileName)
		{
			var time = new Date();
			var y = time.getFullYear();
			var m = time.getMonth()+1;
			var d = time.getDate();
			var h = time.getHours();
			var mm = time.getMinutes();
			var s = time.getSeconds();
			return baseFileName+'_'+y+add0(m)+add0(d)+'_'+add0(h)+add0(mm)+add0(s)+".jpg";
		}
		function downLoad(url,baseFileName){
			var oA = document.createElement("a");
			oA.download = getSaveFileName(baseFileName);// 设置下载的文件名，默认是'下载'
			oA.href = url;
			document.body.appendChild(oA);
			oA.click();
			oA.remove(); // 下载之后把创建的元素删除
		}
		$("#file1").change(function() {
			var objUrl = createURL(this.files[0]); //获取文件信息
			var filesize=this.files[0].size;
			if (objUrl) {
				//console.log(objUrl);
				pdfjsLib.getDocument(objUrl).promise.then(doc => {
					//console.log(doc);
					const pageNumber=1;
					doc.getPage(pageNumber).then(page => {
							const scale = 4.0;
							const viewport = page.getViewport({ scale: scale });
							//console.log(viewport);							
							const canvas = document.createElement('canvas');
							canvas.height = viewport.height;
							canvas.width = viewport.width;
							//document.getElementById('pdf-container').appendChild(canvas);
							const renderContext = {
								canvasContext: canvas.getContext('2d'),
								viewport: viewport,
								backgroundColor: '#FFFFFF'
							};
							page.render(renderContext).promise.then(function(){
							 	var data = canvas.toDataURL("image/jpeg",0.93);
								var baseFileName=getFileName();
								downLoad(data,baseFileName);
							});
							//canvas.remove();
						});						
					});
			}
		});
	
    </script>
  </body>
</html>
